<template>
	<section class="openRights wrapper">
		<el-form label-position="right" class="demo-form-inline" :rules="rules" :model="openRights" ref="openRights"
             label-width="100px">
             <el-row style="width:100%;margin-bottom: 22px;">
		        <el-col :span="8">
		          <el-checkbox v-model="openRights.checkedComplaint">开通投诉服务</el-checkbox>
		        </el-col>
		    </el-row>
		    <div class="service" v-if='openRights.checkedComplaint===true'>
		    	<el-row class="inline-row">
			        <el-col :span="12">
			          <el-form-item label="是否有价格表:">
			          	<el-radio v-model="isPriceState" class="radio" label="1">是</el-radio>
			            <el-radio v-model="isPriceState" class="radio" label="0">否</el-radio>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="12">
			          <el-form-item label="是否有白名单:">
			          	<el-radio v-model="isWhiteState" class="radio" label="1">是</el-radio>
			            <el-radio v-model="isWhiteState" class="radio" label="0">否</el-radio>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="8">
			          <el-form-item label="投诉账号:" prop="account">
			            <el-input v-model="openRights.account"  style="width: 220px" size="small"></el-input>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="8">
			          <el-form-item label="投诉密码:" prop="pwd">
			            <el-input v-model="openRights.pwd"  style="width: 220px" size="small"></el-input>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="8">
			          <el-form-item label="投诉账号邮箱密码:" prop="emailPwd">
			            <el-input v-model="openRights.emailPwd"  style="width: 220px" size="small"></el-input>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="8">
			          <el-form-item label="投诉账号验证手机:" prop="cellPhone">
			            <el-input v-model="openRights.cellPhone"  style="width: 220px" size="small"></el-input>
			          </el-form-item>
			        </el-col>
			    </el-row>
		    </div>
		    <el-row style="width:100%;margin-bottom: 22px;">
		        <el-col :span="8">
		          <el-checkbox v-model="openRights.checkedData">开通数据服务</el-checkbox>
		        </el-col>
		    </el-row>
		    <el-row class="action_row" >
		        <el-col :span="14">
		          <el-button type="primary" :disabled="!(openRights.checkedComplaint||openRights.checkedData)" class="top_save" @click="onSubmit('openRights')" size="small"><i class="fa fa-save"></i> 提交</el-button>
		        </el-col>
		    </el-row>
        </el-form>
	</section>
</template>

<script>
	import Vue from 'vue';
	import {mapGetters} from 'vuex';
	import {Form,Row,Col,Checkbox,FormItem,Input,Radio,Button,Message} from 'element-ui';
	import {validTel ,checkQQ,validEmail} from '../../utils/auth'
	
	Vue.use(Form)
	Vue.use(Row)
	Vue.use(Col)
	Vue.use(Checkbox)
	Vue.use(FormItem)
	Vue.use(Input)
	Vue.use(Radio)
	Vue.use(Button)
	
	Vue.prototype.$message = Message;
	export default {
		head(){
	        return {
	            title: "开通维权通服务",
	            meta: [
	                { hid: 'edit-brand', name: 'edit-brand', content: 'edit-brand' }
	            ]
	        }
	    },
	    data(){
		    var validateCellPhone = (rule, value, callback) => {
		        if( value && validTel(value)==false) {
                    callback(new Error('手机号格式错误'))
                }else{
                	callback()
                }
		    };
	    	return{
	    		brandId:'',
	    		isPriceState:'1',
    			isWhiteState:'1',
	    		openRights:{
	    			account:'',
	    			pwd:'',
	    			emailPwd:'',
	    			cellPhone:'',
	    			checkedComplaint:false,
	    			checkedData:false
	    		},
	    		
	    		rules: {
		          	cellPhone: [
		            	{validator: validateCellPhone, trigger: 'blur'}
		          	]
	    		}
	    	}
	    },
	    computed : {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            }),
		},
	    mounted(){
			this.getUrl()
			this.getBrandDetailInfo()
		},
	    
	    methods: {
	    	onSubmit(formName) {
	    		let Info={
	    			'brandId':Number(this.brandId),
	    			'appealFlag':this.openRights.checkedComplaint == true ? 1 : 0,
	    			'priceTableFlag':Number(this.isPriceState),
	          		'whiteListFlag':Number(this.isWhiteState),
	          		'appealAccount':this.openRights.account,
	          		'appealPasswd':this.openRights.pwd,
	          		'appealEmailPasswd':this.openRights.emailPwd,
	          		'appealMobile':this.openRights.cellPhone,
	          		'dataStatus':this.openRights.checkedData == true ? 1 : -1
	    		}
		        this.$refs[formName].validate((valid) => {
		          	if (valid) {
		          		this.$store.dispatch('openMaintenanceRight',Info)
							.then((response) => {
								if(response.data.successed==true){
									this.$message({
							          	message: '提交成功',
							          	type: 'success'
						       		});
						            this.$router.push({path: '/brandadmin'});
								}
		                	})
							.catch((error) => {
								
		                    })
		          	}
		        });
		    },
		    
		    getBrandDetailInfo(){
		    	this.$store.dispatch('brandDetailInfo',{'brandId':this.brandId})
					.then((response)=>{
						if(response.data){
							let result = response.data;
        					if(result.successed == true){
	                            if(result.data){
	                            	//pageTab
		                            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
		                                let arr = this.pageTabsList;
		                                arr[arr.length-1].name = result.data.brandName;
		                                this.$store.commit('PAGETABSLIST',{data:arr})
		                            }
		                            
		                            if(result.data.appealFlag==1){
	                            		this.openRights.checkedComplaint=true
	                            	}else if(result.data.appealFlag==0){
	                            		this.openRights.checkedComplaint=false
	                            	}
	                            	this.isPriceState=String(result.data.priceTableFlag)
	                            	this.isWhiteState=String(result.data.whiteListFlag)
	                            	this.openRights.account=result.data.appealAccount
	                            	this.openRights.pwd=result.data.appealPasswd
	                            	this.openRights.emailPwd=result.data.appealEmailPasswd
	                            	this.openRights.cellPhone=result.data.appealMobile
	                            	if(result.data.dataStatus==1){
	                            		this.openRights.checkedData=true
	                            	}else if(result.data.dataStatus==-1){
	                            		this.openRights.checkedData=false
	                            	}
	                            }
	                        }
        				}
					})
					.catch((error) => {
        				Message.error('数据不存在');
                    })
		    },
		    
		    //取Url参数
			getUrl() {
			    var url = location.search; 
			    var theRequest = new Object();
			    if (url.indexOf("?") != -1) {
			        var str = url.substr(1);
			        var strs = str.split("&");
			        for(var i = 0; i < strs.length; i ++) {
			            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			        }
			    }
		    	this.brandId=theRequest.id
			}
		    
	    }
	}
</script>

<style lang="scss">
	.openRights{
		.demo-form-inline{
			min-width: 800px;
    		max-width: 1000px;
		}
		.inline-row{
		    width: 50%;
		    display: inline-block;
		}
		.action_row {
		    width: 80%;
		    float: left;
		    margin-top: 20px;
		    .top_save {
			    float: right;
			    margin-right: 40px;
		    }
		}
		.el-form-item__label{
			width: 150px !important;
		}
		.el-form-item__content{
			margin-left: 150px !important;
		}
		.el-form-item__error{
			width: 215px;
		}
	}
</style>